<template>
	<view class="category">
		<z-tabs class="z-tabs" ref="tabs" active-color="#000" bar-height="4" bar-width="120" value-key="id" :list="list"
			:current="current" @change="tabsChange"></z-tabs>
		<swiper :current="current" 
		@transition="swiperTransition" 
		@animationfinish="swiperAnimationfinish" 
		class="swiper">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<view class="pList">
					<view class="produce"  @click="goDetail(produce)" v-for="produce in item.productList" :key="produce.productId">
						<image :src="produce.mainSkuImg" mode=""></image>
						<view>{{produce.name}}</view>
						<view>￥{{produce.mallPrice}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	
	import {
		reactive,
		ref
	} from 'vue'
	// 导入获取分类的接口
	import {
		GetCategory
	} from '../../api/index.js'
	// import zTabs from '../../uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
	// ref的引用
	const tabs = ref(null);
	// 当tabs或者swiper的下标
	const current = ref(0);
	// tabs，swiper的内容
	const list = ref([])
	//tabs通知swiper切换
	function tabsChange(index) {
		current.value = index;
	}

	function swiperTransition(e) {
		tabs.value.setDx(e.detail.dx);
	}

	function swiperAnimationfinish(e) {
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}
	GetCategory()
		.then(res => {
			// 更新分类列表
			list.value = res.data;
		})
	function goDetail(produce){
		uni.navigateTo({
			url:"/index/detail/detail?id="+produce.mainSkuId
		})
	}
	// 01 创建 /index/detail/detail
	// 02 pages.json 添加分包，与分包预加载
	// 03 添加事件跳转
</script>

<style lang="scss" scoped>
	.category{
		// 垂直弹性布局
		display: flex;
		flex-direction: column;
		// 自适应高
		position: absolute;
		left: 0;top:0;right:0;bottom:0;
		
	}
	.z-tabs{
		height: 100rpx;
	}
	.swiper{
		// swiper高度为剩余的高 父高度-ztabs高度
		flex:1;
		overflow:hidden;
	}
	.swiper-item{
		// 高和swiper保持一致，垂直滚动
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
	}
	.pList {
		// 高度自适应
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	    
		.produce{
			
		
			flex-basis: 50%;
			min-width: 50%;
			width: 50% !important;
			padding: 20rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				
				height: 240rpx;
			}
		}
	}
</style>